<div id="memberMap">
    <div id="mapFrame"><div id="map-canvas"></div></div>
</div>
<script type="text/javascript">
    var marker;
    var map;

    var myLatlng = new google.maps.LatLng(<?=$member["geoLocation"]?>);
    
    function initialize() {

        var mapOptions = {
                zoom: 15,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                center: myLatlng
            };
        map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);

        marker = new google.maps.Marker({
            map:map,
            draggable:false,
            animation: google.maps.Animation.DROP,
            position: myLatlng
        });
        google.maps.event.addListener(marker, 'click', toggleBounce);
        google.maps.event.addListener (marker, 'drag', function (event) {
            document.getElementById("generalInfo_position").value = marker.getPosition().lat()+","+marker.getPosition().lng();
        });

        google.maps.event.addListener (marker, 'dragend', function (event) {
            var point = marker.getPoint();
            map.panTo(point);
        });
    }

    function toggleBounce() {
        if (marker.getAnimation() != null){
            marker.setAnimation(null);
        }else{
            marker.setAnimation(google.maps.Animation.BOUNCE);
        }
    }
    google.maps.event.addDomListener(window, 'load', initialize);

    function setMap(){
        if($("#generalInfo_position").val()!=''){
            var temp=$("#generalInfo_position").val().split(",");
            myLatlng = new google.maps.LatLng(temp[0],temp[1]);
            initialize();
        }else{
            var temp=$("#generalInfo_position").val().split(",");
            myLatlng = new google.maps.LatLng(<?=$member["geoLocation"]?>);
            initialize();
        }
    }
    
    $('document').ready(function(){
        setMap();
    });
</script>